<template>
	<view class="content">
		<view class="header">
			共{{datasource.length}}件商品
		</view>
		<view class="item" v-for="(item,index) in datasource" :key="index">
			<view class="row-center">
				<text class="name">{{item.card_name}}</text>
				<text style="color: #868686;font-size: 24upx;">x{{item.card_num}}</text>
			</view>
			<view class="price">
				<text>￥{{item.face_value}}</text>
			</view>
		</view>
		<view class="bottom-view">
			<view style="display: flex;align-items: center;">
				<text style="color: #333333;font-size: 28upx;">合计：</text>
				<text style="color: #FF0000;font-size: 26upx;">￥{{totalPrice}}</text>
			</view>
			<view class="next-btn" @click="settlement" style="background-color: #0A77DE;">立即结算</view>
		</view>
	</view>
</template>

<script>
	import {
		cardOrderPreview
	} from '@/api/peopleHide.js'
	import {
		cardOrder,
		cardPay
	} from '@/api/peopleHide.js'
	export default {
		data() {
			return {
				datasource: [],
				totalPrice: 0,
				pamaDict: {},
				joinType: 0 //1是订单结算过来
			}
		},
		onLoad(options) {
			if (options.joinType) {
				this.joinType = options.joinType
			}
			if (options.pamadict) {
				let pamadict = JSON.parse(options.pamadict)
				this.pamaDict = pamadict
				cardOrderPreview(pamadict).then(res => {
					this.datasource = res.data.info
					this.totalPrice = res.data.order_price
				})
			}
		},
		methods: {
			settlement() { //结算
				cardOrder(this.pamaDict).then(res => {
					let order_sn = res.data.order_sn
					this.cardPay(order_sn)
				})
			},
			cardPay(order_sn) {
				uni.showLoading({
					title: '支付中'
				});
				let that = this
				let padaDict = {
					order_sn: order_sn
				}
				// #ifdef H5
				padaDict.from = 'weixinh5'
				// #endif
				// #ifdef MP
				padaDict.from = 'routine'
				// #endif
				cardPay(padaDict).then(res => {
					//joinType ==1 是订单结算过来 
					// console.log(res.data.result.jsConfig)
					let jsConfig = res.data.result.jsConfig
					// #ifdef MP
					uni.requestPayment({
						timeStamp: jsConfig.timestamp,
						nonceStr: jsConfig.nonceStr,
						package: jsConfig.package,
						signType: jsConfig.signType,
						paySign: jsConfig.paySign,
						success: (res) => {
							// console.log(res)
							uni.hideLoading();
							return that.$util.Tips({
								title: '支付成功',
								icon: 'success'
							}, () => {
									// that.$emit("updatasource")
									uni.navigateBack({
										delta: 2,
										success: (res) => {
											let page = getCurrentPages().pop(); //跳转页面成功之后
											if (!page) {
												return;
											} else {
												let options = {
													type: 'refreshTask' // 在这里自定义要传递的数据，返回的页面根据这个数据进行判断执行不同的操作
												}
												page.onShow(options); // 可以使用展示页面的各个生命周期方法
											}

										}
									})
								
							});
						}
					})
					// #endif
					// if(this.joinType == 1){

					// }e
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f5f6;
	}

	.content {
		padding-bottom: 140upx;
	}

	.header {
		width: 100%;
		display: flex;
		align-content: center;
		height: 80upx;
		color: #000000;
		font-size: 30upx;
		font-weight: 400;
		margin-top: 20upx;
		background-color: #fff;
		align-items: center;
	}

	.header,
	.item {
		padding-left: 30upx;
		padding-right: 30upx;
		box-sizing: border-box;
	}

	.item {
		width: 100%;
		display: flex;
		flex-direction: column;
		height: 132upx;
		background-color: #fff;
		border-top: 1px solid#F3F3F3;
		justify-content: center;
	}

	.row-center {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;

		.name {
			color: #000000;
			font-size: 32upx;
			font-weight: 500;
		}
	}

	.price {
		display: flex;
		// align-items: flex-end;
		justify-content: flex-end;
		margin-top: 16upx;
		color: #FF0000;
		font-size: 26upx;
	}

	.bottom-view {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 120upx;
		background-color: #fff;
		z-index: 9;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30upx;
		box-sizing: border-box;

		.next-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 240upx;
			height: 70upx;
			background: #e93323;
			border-radius: 36upx;
			color: #fff;
			font-size: 28upx;
		}
	}
</style>
